<template>
  <view class="search">
    <view class="search-box">
      <uv-search
          :modelValue="keyWord"
          @update:modelValue="updateKeyWord"
          @change="searchFn"
          placeholder="关键字">
      </uv-search>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";

const props = defineProps({
  keyWord: {
    type: String,
    default: ""
  }
});

const emit = defineEmits(['update:keyWord']);

const updateKeyWord = (value) => {
  emit('update:keyWord', value);
};

const searchFn = () => {
  console.log(props.keyWord, '---');
};
</script>

<style scoped lang="scss">
.search {
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  .search-box {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background-color: #FFFFFF;
  }
}
</style>